<template>
	<div class="areabox">
		<div class="header">
			<span class="logo"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/logo_1.png" @click="zhuye()"/></span>
			<div class="seach-box" @click="seachStuta==true&&seachbtn()">
				<i class="seachimg"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/icon_search@2x.png"/></i>
				<span v-show="seachshow">搜索商品</span>
				<form action="javascript:;" v-show="seachinput">
					<input type="search" name="" id="seach" value="" v-model="seachvalue" placeholder="搜索商品"  @keyup.enter="seachsend"/>
				</form>
				
			</div>
			<router-link :to="nt_user!=0?'/informationlist':'/login'" class="xiaoxi" v-show="!seachrmshow"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xiaoxi.png"/><span id="xmessage"></span></router-link>
			<span class="qxsousuo dasousuo" v-show="seachrmshow" @click="seachremove()">取消</span>
		</div>
		<div>
			<ul class="area-dnav">
				<li :class="{'active':index==ind}" v-for="(item,index) in arealist" v-html="index==ind?'<span></span>'+item.cate_name:item.cate_name" @click="dnavclick(index)"></li>
			</ul>
			<ul class="area-xnav">
				<li v-for="item in arealist" class="area-block">
					<p v-text="'— '+item.cate_name+' —'" class="area-title"></p>
					<div class="arealist-item">
						<span v-for="itemlist in item.cate_list">
							<router-link :to="{path:'/seachall',query:{'seachid':itemlist.cate_id,'statusall':1}}">
								<img :src="'http://www.ntyouxuan.com/'+itemlist.cate_logo"/>
								<span v-text="itemlist.cate_name"></span>
							</router-link>
						</span>
					</div>
				</li>
			</ul>
		</div>
		<navfot></navfot>
		<seachrm v-if="seachrmshow" @seachitems="seachsendtow"></seachrm>
	</div>
</template>

<script>
	import navfot from '@/components/nav'
	import seachrm from '@/components/seachview/seachmodel'
	export default {
		name:'ntarea',
		components:{navfot,seachrm},
		data(){
			return{
				ind:0,
				seachshow:true,
				seachStuta: true,
				seachinput: false,
				arealist:[],
				seachvalue:'',
				seachrmshow:false
			}
		},
		created:function(){
			
		},
		methods:{
			dnavclick:function(ind){
				this.ind=ind;
				var h=$(".area-block").eq(ind).position().top;
				var scrollH=$(".area-xnav").scrollTop();
				$(".area-xnav").scrollTop(h+scrollH);
			},
			seachbtn: function () {
		      var self = this
		      var b = 0
		      for (var i = 151; i > 20; i--) {
		        (function (i) {
		          var a = i
		          setTimeout(function () {
		            $('.seachimg img').css('margin-left', a / 100 + 'rem')
		            if (i <= 21) {
		              self.seachshow = false
		              self.seachinput = true
		              self.seachrmshow = true
		              setTimeout(function () {
		                document.getElementById('seach').focus()
		              }, 100)
		              self.seachStuta = false
		            }
		          }, 1 * b)
		          b++
		        })(i)
		      }
		    },
		    
		    seachremove: function () {
			// 当点击搜索时的动画
		      this.seachinput = false
		      var self = this
		      self.seachrmshow = false
		      setTimeout(function () {
		        self.seachshow = true
		        $('.seachimg img').css('margin-left', 151 / 100 + 'rem')
		        self.seachStuta = true;
		      }, 100)
		    },
		    seachsend:function(){
		    	var self=this;
		    	localStorage.setItem("nt_keyword",self.seachvalue);
		    	this.$router.push({path:'/seachall'});
		    },
		    zhuye: function(){
				window.location.href='http://www.ntyouxuan.com/newnt/#/';
			},
		  	seachsendtow:function(data){
		  		localStorage.setItem("nt_keyword",data);
		  		this.seachremove();
		    	var self=this;
		    	self.seachrmshow=false;
				  setTimeout(function () {
				  	self.$router.push({path:'/seachall'});
				  }, 150);
		  	},
		    scrollnav:function(){
		    	var self=this;
		    	var scrollH=$(".area-xnav").scrollTop();
		    	var ulH=$(".area-xnav").height();
		    	for(var i=0;i<$(".area-block").length;i++){
		    		(function(i){
		    			var a=i;
		    				var h1=$(".area-block").eq(a).position().top;
		    				if(h1<20&&h1>-$(".area-block").eq(a).height()){
		    					var h2=$(".area-block").eq(a+1).position().top;
		    					var hli=$(".area-dnav .active").height();
		    					var scHd=$(".area-dnav").scrollTop();
		    					if(h2<(ulH/2)){
		    						self.ind=a+1;
		    						setTimeout(function(){
		    							var navH=$(".area-dnav .active").position().top;
			    						if(navH>(ulH/2)){
			    							$(".area-dnav").scrollTop(hli+scHd);
				    					}
				    					if(navH<(ulH/2)-hli){
				    						$(".area-dnav").scrollTop(scHd-hli);
				    					}
		    						},200);
		    					}else{
		    						self.ind=a;
		    					}
		    							    					
		    				}
		    			
		    		})(i);
		    	}
		    }
		},
		mounted:function(){
			var self =this;
			$.ajax({
				type:"get",
				url:furl+"index.php?app=ajax_category&act=cate_index",
				dataType:'json',
				success:function(res){
					if(res.done){
						self.arealist=res.retval;
					}
				}
			});
			document.getElementsByClassName('area-xnav')[0].addEventListener("scroll",self.scrollnav);
			$.ajax({
				type: "get",
				url: furl + "index.php?app=ajax&act=new_message",
				dataType: 'json',
				success: function(res) {
					self.xiaoxitx=res.retval.new_message;
					if(self.xiaoxitx == 0){
						$("#xmessage").css("display","none")
					}
					console.log(self.xiaoxitx)
				}
			});
		},
		activated:function(){
			this.ind=0;
			this.seachremove();
		}
	}
</script>

<style>
	.areabox{font-size:0;padding-top: 0.9rem;padding-bottom: 0.98rem;}
	.area-dnav{/*border:1px solid #000;*/position:absolute;top:0.9rem;left:0;width:2rem;bottom:0.98rem;box-sizing: border-box;overflow-y: scroll;background-color:#f9f9f9;}
	.area-dnav>li{font-size:0.28rem;color:#666;padding-left:0.4rem;padding-right: 0.4rem;height:1.6rem;box-sizing: border-box;border-bottom: 1px solid #fff;line-height: 0.48rem;padding-top: 0.3rem;position:relative;}
	.area-xnav{/*border:1px solid #000;*/position:absolute;top:0.9rem;left:2rem;width:5.5rem;bottom:0.98rem;box-sizing: border-box;overflow-y: scroll;background-color:#fff;}
	.area-dnav .active{color:#fb9722;background-color: #FFFFFF;}
	.area-dnav span{display: inline-block;width:0.06rem;height:0.78rem;border-radius:0.06rem;background-color:#fb9722;position:absolute;left:0;top:0.4rem;}
	
	.area-title{font-size:0.24rem;color:#999;height:1.03rem;line-height: 1.03rem;text-align: center;}
	.arealist-item{padding-left: 0.32rem;padding-right: 0.32rem;}
	.arealist-item>span{display: inline-block;margin-right: 0.3rem;width:1.4rem;box-sizing: border-box;overflow: hidden;text-align: center;height:2.2rem;vertical-align: top;}
	.arealist-item>span>a{display: block;}
	.arealist-item>span:nth-child(3n){margin-right: 0;}
	.arealist-item>span img{width:1.4rem;height:1.4rem;}
	.arealist-item>span span{margin-top:0.1rem;width:100%;font-size:0.24rem;color:#666;display: inline-block;line-height: 0.32rem;height:0.7rem;}
</style>